<template>
  <div class="type">
    <van-search class="fixed search cc" placeholder="请输入搜索关键词" />

    <van-tree-select 
      :items="items"
      :main-active-index.sync="activeIndex"
    >
      <template slot="content">
        <ul class="flex jc-sa fww">
          <li class="item" v-for="item in productList" :key="item.productId">
            <img
              :src="item.imgUrl"
              alt=""
            />
            <p class="f12">烟台丑苹果 12枚装（75mm+/枚</p>
          </li>
        </ul>
      </template>
    </van-tree-select>
    <Footer></Footer>
  </div>
</template>

<script>
import Footer from "@/components/Footer";
import $http from "@/utils/http";
export default {
  components: {
    Footer,
  },

  data() {
    return {
      activeIndex: 0,
      // 分类列表
      items: [{ text: "分组 1" }, { text: "分组 2" }],
      // 商品列表
      productList: [
        // {
        //   categoryId: "",
        //   categoryName: "",
        //   imgUrl: "",
        //   inventory: "",
        //   masterName: "",
        //   maxPrice: "",
        //   minPrice: "",
        //   productId: "",
        //   slaveName: "",
        // },
      ],
    };
  },

  created() {
    this.getTypeList();
  },

  methods: {
    // 切换分类
    changeType(index) {
      console.log(index);
      // 根据下标找到对应的分类编号
      let categoryId = this.items[index].categoryId;
      this.getProductList(categoryId);
    },

    // 获取分类列表并渲染
    getTypeList() {
      $http.get("/category/all").then((res) => {
        this.items = res.list.map((item) => {
          return {
            ...item,
            text: item.name,
          };
        });

        // 获取第一个分类商品列表
        let categoryId = this.items[0].categoryId;
        this.x(categoryId);

      });
    },

    // 根据分类编号categoryId获取商品列表
    getProductList(categoryId) {
      let params = {
        categoryId: categoryId,
      };
      $http.get("/product/list", { params }).then((res) => {
        this.productList = res.list;
      });
    },
  },
};
</script>

<style lang="less">
@import "./index.less";
</style> 

